<template>
  <div id="app">
    <top-nav v-if="!$route.meta.hideplay"></top-nav>
    <keep-alive>
      <!-- @addList="playList=$event"  --> 
      <router-view @play="play" @all="all"  :playMUsicID="playMUsicID" class="animate__animated animate__fadeIn" />
    </keep-alive>
    <play
      v-show="!$route.meta.hideNav"
      v-if="playMusic"
      :playMusic="playMusic"
      :playList="playList"
      @changeMusic="changeMusic"
    ></play>
  
  </div>
</template>
<script>
import Nav from "@/components/Nav.vue";
import Play from "./components/Play.vue";
export default {
  components: {
    "top-nav": Nav,
    Play,
  },
  data() {
    return {
      playMusic: null,
      playList: [],
    };
  },
  methods: {
    play(event) {
      if (event.al && event.al.picUrl) {
        event.picUrl = event.al.picUrl;
      }
      this.playMusic = event;
      let isRepeat = false;
      this.playList.forEach((v) => {
        if (v.id == event.id) {
          isRepeat = true;
        }
      });
      if (!isRepeat) this.playList.push(event);
    },
    all(event){
      // event.forEach(v=>{
      //   this.playList.push(v)
      // })
      this.playList=event
      
    },
    changeMusic(event) {
      let currIndex = 0;
      this.playList.forEach((v, index) => {
        if (v.id == this.playMusic.id) {
          currIndex = index;
        }
      });
      if (event == "prev") {
        if (currIndex == 0) {
          //判断上一曲的当前下标为0 去掉最后一曲
          currIndex = this.playList.length - 1;
        } else {
          currIndex--;
        }
      } else if (event == "next") {
        if (currIndex == this.playList.length - 1) {
          currIndex = 0;
        } else {
          currIndex++;
        }
      } else if (typeof event == "object") {
        this.playMusic = event;
        return;
      }
      this.playMusic = this.playList[currIndex];
    },
  },
  computed: {
    playMUsicID() {
      if (this.playMusic) {
        return this.playMusic.id;
      }
      return 0;
    },
  },
};
</script>